<template>
  <div class="message-detail-page">
    <ResponsiveNav />

    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/account/messages' }">
              <i class="fas fa-chevron-left"></i> {{ $t('返回消息列表') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('消息详情') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="main-card">
        <div class="message-header">
          <h1 class="title">{{ message.title }}</h1>
          <div class="meta">
            <span class="time">{{ message.time }}</span>
            <span class="type" :class="message.type">
              {{ getTypeText(message.type) }}
            </span>
          </div>
        </div>

        <div class="message-content" v-html="message.content"></div>

        <div class="message-actions">
          <el-button @click="handleBack">{{ $t('返回') }}</el-button>
          <el-button
            type="primary"
            :disabled="message.isRead"
            @click="handleMarkRead"
          >
            {{ message.isRead ? $t('已读') : $t('标记为已读') }}
          </el-button>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import Footer from '@/components/Footer.vue'
import {useI18n} from "vue-i18n";
const { t } = useI18n();
const router = useRouter()
const route = useRoute()

// 模拟消息数据
const message = ref({
  id: 1,
  type: 'system',
  title: '系统维护通知',
  content: `
    <p>尊敬的用户：</p>
    <p>为了给您提供更好的服务，我们计划于2024年1月25日凌晨2:00-4:00进行系统维护升级。在此期间，网站的部分功能可能暂时无法使用。</p>
    <p>维护内容：</p>
    <ul>
      <li>系统性能优化</li>
      <li>安全性升级</li>
      <li>新功能上线准备</li>
    </ul>
    <p>给您带来的不便，敬请谅解。</p>
    <p>如有任何问题，请联系客服。</p>
  `,
  time: '2024-01-24 15:30:00',
  isRead: false
})

const getTypeText = (type: string) => {
  switch (type) {
    case 'system':
      return t('系统通知')
    case 'activity':
      return t('活动消息')
    default:
      return t('普通消息')
  }
}

const handleBack = () => {
  router.push('/account/messages')
}

const handleMarkRead = async () => {
  try {
    // TODO: 调用标记已读API
    await new Promise(resolve => setTimeout(resolve, 500))
    message.value.isRead = true
    ElMessage.success(t('已标记为已读'))
  } catch (error) {
    ElMessage.error(t('设置失败，请重试'))
  }
}

onMounted(async () => {
  const messageId = route.params.id
  // TODO: 根据ID获取消息详情
  console.log('获取消息:', messageId)
})
</script>

<style lang="scss" scoped>
.message-detail-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.message-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;

  .title {
    font-size: 24px;
    color: #111;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .meta {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #666;
    font-size: 14px;

    .type {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 13px;

      &.system {
        background: #e6f4ff;
        color: #1890ff;
      }

      &.activity {
        background: #f6ffed;
        color: #52c41a;
      }
    }
  }
}

.message-content {
  color: #333;
  line-height: 1.8;
  font-size: 15px;

  :deep(p) {
    margin-bottom: 16px;
  }

  :deep(ul) {
    margin-bottom: 16px;
    padding-left: 20px;

    li {
      margin-bottom: 8px;
    }
  }
}

.message-actions {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;

  .el-button {
    min-width: 100px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .main-card {
    padding: 24px 16px;
  }

  .message-header {
    margin-bottom: 24px;
    padding-bottom: 16px;

    .title {
      font-size: 20px;
      margin-bottom: 12px;
    }

    .meta {
      flex-wrap: wrap;
      gap: 12px;
    }
  }
}
</style>
